import React from "react";
import styles from "./index.module.scss";

interface Iprops {
  listLen: number;
  baseUrl: string;
  page: number;
  total: number;
  style: React.CSSProperties;
}
function Index(props: Iprops) {
  const { page = 1, listLen, baseUrl, total, style } = props;

  let list: any = [];
  if (page > 3) {
    if (props.listLen) {
      list = [
        {
          value: 1,
          displayName: 1,
        },
        {
          value: null,
          displayName: "...",
        },
        {
          value: page - 2,
          displayName: page - 2,
        },
        {
          value: page - 1,
          displayName: page - 1,
        },
        {
          value: page,
          displayName: page,
        },
        {
          value: page + 1,
          displayName: page + 1,
        },
        {
          value: page + 2,
          displayName: page + 2,
        },
      ];
    } else {
      list = [
        {
          value: 1,
          displayName: 1,
        },
        {
          value: null,
          displayName: "...",
        },
        {
          value: page - 2,
          displayName: page - 2,
        },
        {
          value: page - 1,
          displayName: page - 1,
        },
        {
          value: page,
          displayName: page,
        },
      ];
    }
  } else {
    list = [
      {
        value: 1,
        displayName: 1,
      },
      {
        value: 2,
        displayName: 2,
      },
      {
        value: 3,
        displayName: 3,
      },
      {
        value: 4,
        displayName: 4,
      },
      {
        value: 5,
        displayName: 5,
      },
    ];
  }
  list = list.filter((item) => +item.value <= Math.ceil(total / listLen));
  return (
    <ul className={styles.pager} style={style}>
      {+page > 1 ? (
        <li className={styles.pageItem}>
          <a href={`/${baseUrl}/${+page - 1}`}>
            <svg
              viewBox="64 64 896 896"
              focusable="false"
              data-icon="left"
              width="1em"
              height="1em"
              fill="currentColor"
              aria-hidden="true"
            >
              <path d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"></path>
            </svg>
          </a>
        </li>
      ) : null}
      {list.map((item) => {
        return (
          <li
            key={item.value}
            className={`${styles.pageItem} ${
              page === item.value ? styles.current : ""
            }`}
          >
            {item.value ? (
              <a href={`/${baseUrl}/${item.value}`}>{item.displayName}</a>
            ) : (
              item.displayName
            )}
          </li>
        );
      })}
      {listLen > 0 && page * listLen < total ? (
        <li className={styles.pageItem}>
          <a href={`/${baseUrl}/${+page + 1}`}>
            <svg
              viewBox="64 64 896 896"
              focusable="false"
              width="1em"
              height="1em"
              fill="currentColor"
              aria-hidden="true"
            >
              <path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"></path>
            </svg>
          </a>
        </li>
      ) : null}
    </ul>
  );
}

export default Index;
